<template>
  <section>
    <search-box>
      <div class="search-box">
        节点ID:
          <el-input
            class="search-input w-220 m-r-10"
            v-model="searchForm.node_id"
            placeholder="请输入"
            clearable
          ></el-input>
        
        <el-button type="primary" @click="FnSearch">查询</el-button>
      </div>
    </search-box>
    <el-table :data="searchForm.goodsList" border>
      <el-table-column prop="node_id" label="节点ID"/>
      <el-table-column prop="node_name" label="节点名称"/>
      <el-table-column prop="customer_id" label="客户ID"/>
      <el-table-column prop="billing_method_cn" label="计费方式"/>
      <el-table-column prop="suborder_id" label="订单ID"/>
      <el-table-column prop="node_resource_id" label="订单资源ID"/>
      <el-table-column prop="available_zone_name" label="可用区"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button 
            type="text" 
            @click="fnBillMethodChange(row)"
            :disabled="FnBtnDisabled('eks_2_bmsBillCon_method')">
            {{ row.billing_method === '0' ? '转包年包月' : '转按需计费' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>
<script setup>
import { reactive, ref } from 'vue';
import searchBox from '@/components/search-box.vue'
import { authBtnDisabled } from '@/utils/auth.js'
import { ElMessage, ElMessageBox } from 'element-plus';
import bmsBillService from '@/service/eks/bmsBillingConversion';
import { useRoute } from 'vue-router'

const route = useRoute()
const searchForm = reactive({
  node_id: '',
  goodsList: []
});
const FnBtnDisabled = (key) => {
  return authBtnDisabled(key, route.meta.name)
}
const FnSearch = async () => {
  if(searchForm.node_id === '') {
    ElMessage.error('请输入裸金属节点ID再进行查询');
    return;
  }
  await bmsBillService.getPointBmsNode({node_id: searchForm.node_id}).then(res => {
    if(res.code === 'Success') {
      searchForm.goodsList = res.data;
    }
  })
}
const fnBillMethodChange = (row) => {
  ElMessageBox.confirm(`是否将节点${row.node_name}的计费方式从${row.billing_method_cn}转换为${row.billing_method === '0' ? '包年包月' : '按需计费'}？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    let params = {
      node_id: row.node_id,
      to_method: row.billing_method === '0' ? '1' : '0'
    }
    bmsBillService.convertBmsBilling(params).then(res=> {
      if(res.code === 'Success') {
        ElMessage.success('计费方式切换成功');
        FnSearch();
      }
    })
  })
}

</script>
<style scoped lang="scss">
.search-box {
  display: flex;
  align-items: center;
}
</style>